<template>
  <div class="ad-carousel">
    <div 
      class="ad-item" 
      v-for="(item, index) in carouselList" 
      :key="index" 
      :class="{ active: currentIndex === index }"
    >
      <img :src="item.imgUrl" :alt="item.alt" class="ad-img" />
      <div class="ad-text">
        <p class="ad-title">{{ item.title }}</p>
        <p class="ad-subtitle">{{ item.subtitle }}</p>
        <a href="#" class="ad-link">进一步了解 ></a>
      </div>
    </div>
    <!-- 指示器 -->
    <div class="carousel-dots">
      <span 
        class="dot" 
        v-for="(_, index) in carouselList" 
        :key="index" 
        :class="{ active: currentIndex === index }"
        @click="currentIndex = index"
      ></span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, defineProps } from 'vue';

// 接收父组件传递的轮播数据
const props = defineProps({
  carouselList: {
    type: Array,
    default: () => [
      { imgUrl: '', alt: '', title: '', subtitle: '' }
    ]
  }
});

const currentIndex = ref(0);
let carouselTimer = null;

// 自动轮播
const startCarousel = () => {
  carouselTimer = setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % props.carouselList.length;
  }, 3000);
};

onMounted(startCarousel);
onUnmounted(() => clearInterval(carouselTimer));
</script>

<style scoped>
.ad-carousel {
  position: relative;
  background-color: #fdf5f0;
  border-radius: 12px;
  padding: 16px;
  overflow: hidden;
  height: 140px;

  .ad-item {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 16px;
    align-items: center;
    &.active {
      display: flex;
    }
  }

  .ad-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
  }

  .ad-text {
    margin-left: 16px;
    flex: 1;
    .ad-title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin-bottom: 8px;
    }
    .ad-subtitle {
      font-size: 14px;
      color: #666;
      margin-bottom: 12px;
    }
    .ad-link {
      font-size: 14px;
      color: #ff6b6b;
      text-decoration: none;
    }
  }

  .carousel-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #ddd;
      cursor: pointer;
      &.active {
        background-color: #ff6b6b;
        width: 24px;
        border-radius: 4px;
      }
    }
  }

  
  @media (max-width: 375px) {
    height: 120px;
    .ad-img {
      width: 80px;
      height: 80px;
    }
    .ad-title {
      font-size: 16px !important;
    }
  }
}
</style>